<template>
	<view class="app-card" :class="{ 'clickable': clickable }" @tap="handleTap">
		<slot></slot>
	</view>
</template>

<script>
export default {
	name: 'AppCard',
	props: {
		clickable: {
			type: Boolean,
			default: false
		}
	},
	methods: {
		handleTap() {
			if (this.clickable) {
				this.$emit('tap');
			}
		}
	}
}
</script>

<style lang="scss" scoped>
.app-card {
	background-color: rgba(255, 255, 255, 0.9);
	border-radius: 32rpx;
	box-shadow: 0 8rpx 32rpx rgba(106, 130, 251, 0.15);
	padding: 32rpx;
	margin: 16rpx 0;
	transition: transform 0.2s ease;
	
	&.clickable:active {
		transform: scale(0.98);
	}
}
</style>